<template>
  <div class="profile-container">
    <div class="banner">
      <div class="banner-content">
        <h1>个人信息</h1>
        <p>管理您的个人资料和账户信息</p>
      </div>
    </div>

    <div class="content-section">
      <div class="profile-content">
        <div class="profile-sidebar">
          <div class="avatar-section">
            <div class="avatar-container">
              <img :src="userInfo.avatar" alt="用户头像" class="user-avatar" />
              <div class="avatar-overlay" @click="changeAvatar">
                <i class="el-icon-camera"></i>
                <span>更换头像</span>
              </div>
            </div>
            <h2 class="user-name">{{ userInfo.screenName }}</h2>
            <div class="user-role">
              {{
                userInfo.roleId === '1'
                  ? '管理员'
                  : userInfo.roleId === '3'
                    ? '戏曲家'
                    : '普通用户'
              }}
            </div>
            <div class="user-since">注册于: {{ userInfo.registerTime}}</div>
          </div>
          
          <div class="menu-section">
            <div 
              class="menu-item" 
              :class="{ active: activeSection === 'basic' }" 
              @click="activeSection = 'basic'"
            >
              <i class="el-icon-user"></i>
              <span>基本信息</span>
            </div>
            <div 
              class="menu-item" 
              :class="{ active: activeSection === 'security' }" 
              @click="activeSection = 'security'"
            >
              <i class="el-icon-lock"></i>
              <span>账号安全</span>
            </div>
          </div>
        </div>

        <div class="profile-main">
          <!-- 基本信息部分 -->
          <div v-if="activeSection === 'basic'" class="section-container">
            <h3 class="section-title">基本信息</h3>
            <el-form ref="basicForm" :model="basicInfo" :rules="basicRules" label-width="100px" class="profile-form">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="basicInfo.userName" disabled></el-input>
                <!-- <span class="form-tip">用户名不可修改</span> -->
              </el-form-item>
              
              <el-form-item label="网名" prop="screenName">
                <el-input v-model="basicInfo.screenName" placeholder="请输入您希望显示的名称"></el-input>
              </el-form-item>
              
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="basicInfo.phone" placeholder="请输入您的手机号码" disabled>
                  <template slot="append">
                    <el-button type="text" @click="openPhoneVerificationDialog">更改</el-button>
                  </template>
                </el-input>
                <!-- <span v-if="basicInfo.phoneVerified" class="form-verified">
                  <i class="el-icon-success"></i> 已验证
                </span> -->
              </el-form-item>
              
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="basicInfo.email" placeholder="请输入您的电子邮箱" disabled>
                  <template slot="append">
                    <el-button type="text" @click="openEmailVerificationDialog">更改</el-button>
                  </template>
                </el-input>
                <!-- <span v-if="basicInfo.emailVerified" class="form-verified">
                  <i class="el-icon-success"></i> 已验证
                </span> -->
              </el-form-item>
              
              <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="basicInfo.sex">
                  <el-radio label="male" value="男">男</el-radio>
                  <el-radio label="female" value="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="所在地区" prop="address">
                <el-cascader
                  v-model="basicInfo.address"
                  :options="locationOptions"
                  placeholder="请选择所在地区">
                </el-cascader>
              </el-form-item>
              
              <el-form-item label="简介" prop="description">
                <el-input type="textarea" v-model="basicInfo.description" :rows="4" placeholder="介绍一下您自己..."></el-input>
                <span class="form-tip">还可输入 {{ 200 - (basicInfo.description ? basicInfo.description.length : 0) }} 字</span>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveBasicInfo" :loading="basicLoading">保存更改</el-button>
                <el-button @click="resetBasicForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <!-- 账号安全部分 -->
          <div v-if="activeSection === 'security'" class="section-container">
            <h3 class="section-title">账号安全</h3>
            <el-form ref="securityForm" :model="securityInfo" :rules="securityRules" label-width="100px" class="profile-form">
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input v-model="securityInfo.currentPassword" type="password" placeholder="请输入当前密码" show-password></el-input>
              </el-form-item>
              
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="securityInfo.newPassword" type="password" placeholder="请输入新密码" show-password></el-input>
                <div class="password-strength" v-if="securityInfo.newPassword">
                  <div class="strength-label">密码强度:</div>
                  <div class="strength-meter">
                    <div class="strength-bar" :class="passwordStrengthClass"></div>
                  </div>
                  <div class="strength-text">{{ passwordStrengthText }}</div>
                </div>
                <div class="password-tips">
                  <p>密码建议:</p>
                  <ul>
                    <li :class="{ active: securityInfo.newPassword && securityInfo.newPassword.length >= 8 }">
                      至少8个字符
                    </li>
                    <li :class="{ active: securityInfo.newPassword && /[A-Z]/.test(securityInfo.newPassword) }">
                      包含大写字母
                    </li>
                    <li :class="{ active: securityInfo.newPassword && /[a-z]/.test(securityInfo.newPassword) }">
                      包含小写字母
                    </li>
                    <li :class="{ active: securityInfo.newPassword && /[0-9]/.test(securityInfo.newPassword) }">
                      包含数字
                    </li>
                    <li :class="{ active: securityInfo.newPassword && /[^A-Za-z0-9]/.test(securityInfo.newPassword) }">
                      包含特殊字符
                    </li>
                  </ul>
                </div>
              </el-form-item>
              
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input v-model="securityInfo.confirmPassword" type="password" placeholder="请再次输入新密码" show-password></el-input>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="changePassword" :loading="securityLoading">修改密码</el-button>
                <el-button @click="resetSecurityForm">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>

    <!-- 手机号验证弹窗 -->
    <el-dialog title="验证手机号码" :visible.sync="isPhoneDialogVisible" width="400px">
      <el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm" label-width="100px">
        <el-form-item label="新手机号码" prop="newPhone">
          <el-input v-model="phoneForm.newPhone" placeholder="请输入新的手机号码"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" v-if="phoneForm.newPhone">
          <el-input v-model="phoneForm.code" placeholder="请输入验证码">
            <template slot="append">
              <el-button type="text" :disabled="phoneCountDown > 0" @click="sendPhoneVerificationCode">
                {{ phoneCountDown > 0 ? `${phoneCountDown}s` : '发送验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isPhoneDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="verifyPhoneCode">确认</el-button>
      </div>
    </el-dialog>

    <!-- 邮箱验证弹窗 -->
    <el-dialog title="验证电子邮箱" :visible.sync="isEmailDialogVisible" width="400px">
      <el-form :model="emailForm" :rules="emailRules" ref="emailForm" label-width="100px">
        <el-form-item label="新邮箱地址" prop="newEmail">
          <el-input v-model="emailForm.newEmail" placeholder="请输入新的邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code" v-if="emailForm.newEmail">
          <el-input v-model="emailForm.code" placeholder="请输入验证码">
            <template slot="append">
              <el-button type="text" :disabled="emailCountDown > 0" @click="sendEmailVerificationCode">
                {{ emailCountDown > 0 ? `${emailCountDown}s` : '发送验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEmailDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="verifyEmailCode">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import service from '@/utils/request'
import CryptoJS from 'crypto-js'

export default {
  name: 'ProfileVue',
  data() {
    // 确认密码的验证规则
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.securityInfo.newPassword) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    
    return {
      activeSection: 'basic',
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      userInfo: {
        userName: '',
        screenName: '',
        avatar: '',
        roleId: '0',
        registerTime: '',
        description: '',
        email: '',
        phone: '',
        sex: 'male',
        address: []
      },
      basicInfo: {
        userName: '',
        screenName: '',
        phone: '',
        email: '',
        sex: 'male',
        description: '',
        address: [],
        phoneVerified: false,
        emailVerified: false
      },
      basicRules: {
        screenName: [
          { required: true, message: '请输入网名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '请输入有效的电子邮箱地址', trigger: 'blur' }
        ],
        description: [
          { max: 200, message: '简介不能超过200个字符', trigger: 'blur' }
        ]
      },
      securityInfo: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: '',
        loginVerification: false,
        loginAlert: true,
        twoFactorAuth: false
      },
      securityRules: {
        currentPassword: [
          { required: true, message: '请输入当前密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validateConfirmPassword, trigger: 'blur' }
        ]
      },
      basicLoading: false,
      securityLoading: false,
      // 新增数据
      locationOptions: [
        {
          value: '北京市',
          label: '北京',
          children: [
            { value: '东城区', label: '东城区' },
            { value: '西城区', label: '西城区' },
            { value: '朝阳区', label: '朝阳区' },
            { value: '海淀区', label: '海淀区' },
            { value: '丰台区', label: '丰台区' },
            { value: '石景山区', label: '石景山区' },
            { value: '门头沟区', label: '门头沟区' },
            { value: '房山区', label: '房山区' },
            { value: '通州区', label: '通州区' },
            { value: '顺义区', label: '顺义区' },
            { value: '昌平区', label: '昌平区' },
            { value: '大兴区', label: '大兴区' },
            { value: '怀柔区', label: '怀柔区' },
            { value: '平谷区', label: '平谷区' },
            { value: '密云区', label: '密云区' },
            { value: '延庆区', label: '延庆区' }
          ]
        },
        {
          value: '上海市',
          label: '上海',
          children: [
            { value: '黄浦区', label: '黄浦区' },
            { value: '徐汇区', label: '徐汇区' },
            { value: '长宁区', label: '长宁区' },
            { value: '静安区', label: '静安区' },
            { value: '普陀区', label: '普陀区' },
            { value: '虹口区', label: '虹口区' },
            { value: '杨浦区', label: '杨浦区' },
            { value: '闵行区', label: '闵行区' },
            { value: '宝山区', label: '宝山区' },
            { value: '嘉定区', label: '嘉定区' },
            { value: '浦东新区', label: '浦东新区' },
            { value: '金山区', label: '金山区' },
            { value: '松江区', label: '松江区' },
            { value: '青浦区', label: '青浦区' },
            { value: '奉贤区', label: '奉贤区' },
            { value: '崇明区', label: '崇明区' }
          ]
        },
        {
          value: '天津市',
          label: '天津',
          children: [
            { value: '和平区', label: '和平区' },
            { value: '河东区', label: '河东区' },
            { value: '河西区', label: '河西区' },
            { value: '南开区', label: '南开区' },
            { value: '河北区', label: '河北区' },
            { value: '红桥区', label: '红桥区' },
            { value: '滨海新区', label: '滨海新区' },
            { value: '东丽区', label: '东丽区' },
            { value: '西青区', label: '西青区' },
            { value: '津南区', label: '津南区' },
            { value: '北辰区', label: '北辰区' },
            { value: '武清区', label: '武清区' },
            { value: '宝坻区', label: '宝坻区' },
            { value: '静海区', label: '静海区' },
            { value: '宁河区', label: '宁河区' },
            { value: '蓟州区', label: '蓟州区' }
          ]
        },
        {
          value: '重庆市',
          label: '重庆',
          children: [
            { value: '渝中区', label: '渝中区' },
            { value: '大渡口区', label: '大渡口区' },
            { value: '江北区', label: '江北区' },
            { value: '沙坪坝区', label: '沙坪坝区' },
            { value: '九龙坡区', label: '九龙坡区' },
            { value: '南岸区', label: '南岸区' },
            { value: '北碚区', label: '北碚区' },
            { value: '渝北区', label: '渝北区' },
            { value: '巴南区', label: '巴南区' },
            { value: '万州区', label: '万州区' },
            { value: '涪陵区', label: '涪陵区' },
            { value: '黔江区', label: '黔江区' }
          ]
        },
        {
          value: '河北省',
          label: '河北',
          children: [
            { value: '石家庄市', label: '石家庄市' },
            { value: '唐山市', label: '唐山市' },
            { value: '秦皇岛市', label: '秦皇岛市' },
            { value: '邯郸市', label: '邯郸市' },
            { value: '邢台市', label: '邢台市' },
            { value: '保定市', label: '保定市' },
            { value: '张家口市', label: '张家口市' },
            { value: '承德市', label: '承德市' },
            { value: '沧州市', label: '沧州市' },
            { value: '廊坊市', label: '廊坊市' },
            { value: '衡水市', label: '衡水市' }
          ]
        },
        {
          value: '山西省',
          label: '山西',
          children: [
            { value: '太原市', label: '太原市' },
            { value: '大同市', label: '大同市' },
            { value: '阳泉市', label: '阳泉市' },
            { value: '长治市', label: '长治市' },
            { value: '晋城市', label: '晋城市' },
            { value: '朔州市', label: '朔州市' },
            { value: '晋中市', label: '晋中市' },
            { value: '运城市', label: '运城市' },
            { value: '忻州市', label: '忻州市' },
            { value: '临汾市', label: '临汾市' },
            { value: '吕梁市', label: '吕梁市' }
          ]
        },
        {
          value: '吉林省',
          label: '吉林',
          children: [
            { value: '长春市', label: '长春市' },
            { value: '吉林市', label: '吉林市' },
            { value: '四平市', label: '四平市' },
            { value: '辽源市', label: '辽源市' },
            { value: '通化市', label: '通化市' },
            { value: '白山市', label: '白山市' },
            { value: '松原市', label: '松原市' },
            { value: '白城市', label: '白城市' },
            { value: '延边朝鲜族自治州', label: '延边朝鲜族自治州' }
          ]
        },
        {
          value: '黑龙江省',
          label: '黑龙江',
          children: [
            { value: '哈尔滨市', label: '哈尔滨市' },
            { value: '齐齐哈尔市', label: '齐齐哈尔市' },
            { value: '鸡西市', label: '鸡西市' },
            { value: '鹤岗市', label: '鹤岗市' },
            { value: '双鸭山市', label: '双鸭山市' },
            { value: '大庆市', label: '大庆市' },
            { value: '伊春市', label: '伊春市' },
            { value: '佳木斯市', label: '佳木斯市' },
            { value: '七台河市', label: '七台河市' },
            { value: '牡丹江市', label: '牡丹江市' },
            { value: '黑河市', label: '黑河市' },
            { value: '绥化市', label: '绥化市' }
          ]
        },
        {
          value: '江苏省',
          label: '江苏',
          children: [
            { value: '南京市', label: '南京市' },
            { value: '无锡市', label: '无锡市' },
            { value: '徐州市', label: '徐州市' },
            { value: '常州市', label: '常州市' },
            { value: '苏州市', label: '苏州市' },
            { value: '南通市', label: '南通市' },
            { value: '连云港市', label: '连云港市' },
            { value: '淮安市', label: '淮安市' },
            { value: '盐城市', label: '盐城市' },
            { value: '扬州市', label: '扬州市' },
            { value: '镇江市', label: '镇江市' },
            { value: '泰州市', label: '泰州市' },
            { value: '宿迁市', label: '宿迁市' }
          ]
        },
        {
          value: '浙江省',
          label: '浙江',
          children: [
            { value: '杭州市', label: '杭州市' },
            { value: '宁波市', label: '宁波市' },
            { value: '温州市', label: '温州市' },
            { value: '嘉兴市', label: '嘉兴市' },
            { value: '湖州市', label: '湖州市' },
            { value: '绍兴市', label: '绍兴市' },
            { value: '金华市', label: '金华市' },
            { value: '衢州市', label: '衢州市' },
            { value: '舟山市', label: '舟山市' },
            { value: '台州市', label: '台州市' },
            { value: '丽水市', label: '丽水市' }
          ]
        },
        {
          value: '安徽省',
          label: '安徽',
          children: [
            { value: '合肥市', label: '合肥市' },
            { value: '芜湖市', label: '芜湖市' },
            { value: '蚌埠市', label: '蚌埠市' },
            { value: '淮南市', label: '淮南市' },
            { value: '马鞍山市', label: '马鞍山市' },
            { value: '淮北市', label: '淮北市' },
            { value: '铜陵市', label: '铜陵市' },
            { value: '安庆市', label: '安庆市' },
            { value: '黄山市', label: '黄山市' },
            { value: '滁州市', label: '滁州市' }
          ]
        },
        {
          value: '福建省',
          label: '福建',
          children: [
            { value: '福州市', label: '福州市' },
            { value: '厦门市', label: '厦门市' },
            { value: '莆田市', label: '莆田市' },
            { value: '三明市', label: '三明市' },
            { value: '泉州市', label: '泉州市' },
            { value: '漳州市', label: '漳州市' },
            { value: '南平市', label: '南平市' },
            { value: '龙岩市', label: '龙岩市' },
            { value: '宁德市', label: '宁德市' }
          ]
        },
        {
          value: '江西省',
          label: '江西',
          children: [
            { value: '南昌市', label: '南昌市' },
            { value: '景德镇市', label: '景德镇市' },
            { value: '萍乡市', label: '萍乡市' },
            { value: '九江市', label: '九江市' },
            { value: '新余市', label: '新余市' },
            { value: '鹰潭市', label: '鹰潭市' },
            { value: '赣州市', label: '赣州市' },
            { value: '吉安市', label: '吉安市' },
            { value: '宜春市', label: '宜春市' },
            { value: '抚州市', label: '抚州市' },
            { value: '上饶市', label: '上饶市' }
          ]
        },
        {
          value: '山东省',
          label: '山东',
          children: [
            { value: '济南市', label: '济南市' },
            { value: '青岛市', label: '青岛市' },
            { value: '淄博市', label: '淄博市' },
            { value: '枣庄市', label: '枣庄市' },
            { value: '东营市', label: '东营市' },
            { value: '烟台市', label: '烟台市' },
            { value: '潍坊市', label: '潍坊市' },
            { value: '济宁市', label: '济宁市' },
            { value: '泰安市', label: '泰安市' },
            { value: '威海市', label: '威海市' },
            { value: '日照市', label: '日照市' },
            { value: '莱芜市', label: '莱芜市' },
            { value: '临沂市', label: '临沂市' },
            { value: '德州市', label: '德州市' },
            { value: '聊城市', label: '聊城市' },
            { value: '滨州市', label: '滨州市' },
            { value: '菏泽市', label: '菏泽市' }
          ]
        },
        {
          value: '河南省',
          label: '河南',
          children: [
            { value: '郑州市', label: '郑州市' },
            { value: '开封市', label: '开封市' },
            { value: '洛阳市', label: '洛阳市' },
            { value: '平顶山市', label: '平顶山市' },
            { value: '安阳市', label: '安阳市' },
            { value: '鹤壁市', label: '鹤壁市' },
            { value: '新乡市', label: '新乡市' },
            { value: '焦作市', label: '焦作市' },
            { value: '濮阳市', label: '濮阳市' },
            { value: '许昌市', label: '许昌市' },
            { value: '漯河市', label: '漯河市' },
            { value: '三门峡市', label: '三门峡市' },
            { value: '南阳市', label: '南阳市' },
            { value: '商丘市', label: '商丘市' },
            { value: '信阳市', label: '信阳市' },
            { value: '周口市', label: '周口市' },
            { value: '驻马店市', label: '驻马店市' }
          ]
        },
        {
          value: '湖北省',
          label: '湖北',
          children: [
            { value: '武汉市', label: '武汉市' },
            { value: '黄石市', label: '黄石市' },
            { value: '十堰市', label: '十堰市' },
            { value: '宜昌市', label: '宜昌市' },
            { value: '襄阳市', label: '襄阳市' },
            { value: '鄂州市', label: '鄂州市' },
            { value: '荆门市', label: '荆门市' },
            { value: '孝感市', label: '孝感市' },
            { value: '荆州市', label: '荆州市' },
            { value: '黄冈市', label: '黄冈市' },
            { value: '咸宁市', label: '咸宁市' },
            { value: '随州市', label: '随州市' },
            { value: '恩施州', label: '恩施州' }
          ]
        },
        {
          value: '湖南省',
          label: '湖南',
          children: [
            { value: '长沙市', label: '长沙市' },
            { value: '株洲市', label: '株洲市' },
            { value: '湘潭市', label: '湘潭市' },
            { value: '衡阳市', label: '衡阳市' },
            { value: '邵阳市', label: '邵阳市' },
            { value: '岳阳市', label: '岳阳市' },
            { value: '常德市', label: '常德市' },
            { value: '张家界市', label: '张家界市' },
            { value: '益阳市', label: '益阳市' },
            { value: '郴州市', label: '郴州市' },
            { value: '永州市', label: '永州市' },
            { value: '怀化市', label: '怀化市' },
            { value: '娄底市', label: '娄底市' },
            { value: '湘西州', label: '湘西州' }
          ]
        },
        {
          value: '广东省',
          label: '广东',
          children: [
            { value: '广州市', label: '广州市' },
            { value: '韶关市', label: '韶关市' },
            { value: '深圳市', label: '深圳市' },
            { value: '珠海市', label: '珠海市' },
            { value: '汕头市', label: '汕头市' },
            { value: '佛山市', label: '佛山市' },
            { value: '江门市', label: '江门市' },
            { value: '湛江市', label: '湛江市' },
            { value: '茂名市', label: '茂名市' },
            { value: '肇庆市', label: '肇庆市' },
            { value: '惠州市', label: '惠州市' },
            { value: '梅州市', label: '梅州市' },
            { value: '汕尾市', label: '汕尾市' },
            { value: '河源市', label: '河源市' },
            { value: '阳江市', label: '阳江市' },
            { value: '清远市', label: '清远市' },
            { value: '东莞市', label: '东莞市' },
            { value: '中山市', label: '中山市' },
            { value: '潮州市', label: '潮州市' },
            { value: '揭阳市', label: '揭阳市' },
            { value: '云浮市', label: '云浮市' }
          ]
        },
        {
          value: '广西壮族自治区',
          label: '广西',
          children: [
            { value: '南宁市', label: '南宁市' },
            { value: '柳州市', label: '柳州市' },
            { value: '桂林市', label: '桂林市' },
            { value: '梧州市', label: '梧州市' },
            { value: '北海市', label: '北海市' },
            { value: '防城港市', label: '防城港市' },
            { value: '钦州市', label: '钦州市' },
            { value: '贵港市', label: '贵港市' },
            { value: '玉林市', label: '玉林市' },
            { value: '百色市', label: '百色市' },
            { value: '贺州市', label: '贺州市' },
            { value: '河池市', label: '河池市' },
            { value: '来宾市', label: '来宾市' },
            { value: '崇左市', label: '崇左市' }
          ]
        },
        {
          value: '海南省',
          label: '海南',
          children: [
            { value: '海口市', label: '海口市' },
            { value: '三亚市', label: '三亚市' },
            { value: '三沙市', label: '三沙市' },
            { value: '儋州市', label: '儋州市' },
            { value: '五指山市', label: '五指山市' },
            { value: '琼海市', label: '琼海市' },
            { value: '文昌市', label: '文昌市' },
            { value: '万宁市', label: '万宁市' },
            { value: '东方市', label: '东方市' }
          ]
        },
        {
          value: '四川省',
          label: '四川',
          children: [
            { value: '成都市', label: '成都市' },
            { value: '自贡市', label: '自贡市' },
            { value: '攀枝花市', label: '攀枝花市' },
            { value: '泸州市', label: '泸州市' },
            { value: '德阳市', label: '德阳市' },
            { value: '绵阳市', label: '绵阳市' },
            { value: '广元市', label: '广元市' },
            { value: '遂宁市', label: '遂宁市' },
            { value: '内江市', label: '内江市' },
            { value: '乐山市', label: '乐山市' },
            { value: '南充市', label: '南充市' },
            { value: '眉山市', label: '眉山市' },
            { value: '宜宾市', label: '宜宾市' },
            { value: '广安市', label: '广安市' },
            { value: '达州市', label: '达州市' },
            { value: '雅安市', label: '雅安市' },
            { value: '巴中市', label: '巴中市' },
            { value: '资阳市', label: '资阳市' },
            { value: '阿坝州', label: '阿坝州' },
            { value: '甘孜州', label: '甘孜州' },
            { value: '凉山州', label: '凉山州' }
          ]
        },
        {
          value: '贵州省',
          label: '贵州',
          children: [
            { value: '贵阳市', label: '贵阳市' },
            { value: '六盘水市', label: '六盘水市' },
            { value: '遵义市', label: '遵义市' },
            { value: '安顺市', label: '安顺市' },
            { value: '毕节市', label: '毕节市' },
            { value: '铜仁市', label: '铜仁市' },
            { value: '黔西南州', label: '黔西南州' },
            { value: '黔东南州', label: '黔东南州' },
            { value: '黔南州', label: '黔南州' }
          ]
        },
        {
          value: '云南省',
          label: '云南',
          children: [
            { value: '昆明市', label: '昆明市' },
            { value: '曲靖市', label: '曲靖市' },
            { value: '玉溪市', label: '玉溪市' },
            { value: '保山市', label: '保山市' },
            { value: '昭通市', label: '昭通市' },
            { value: '丽江市', label: '丽江市' },
            { value: '普洱市', label: '普洱市' },
            { value: '临沧市', label: '临沧市' },
            { value: '楚雄州', label: '楚雄州' },
            { value: '红河州', label: '红河州' },
            { value: '文山州', label: '文山州' },
            { value: '西双版纳州', label: '西双版纳州' },
            { value: '大理州', label: '大理州' },
            { value: '德宏州', label: '德宏州' },
            { value: '怒江州', label: '怒江州' },
            { value: '迪庆州', label: '迪庆州' }
          ]
        },
        {
          value: '西藏自治区',
          label: '西藏',
          children: [
            { value: '拉萨市', label: '拉萨市' },
            { value: '日喀则市', label: '日喀则市' },
            { value: '昌都市', label: '昌都市' },
            { value: '林芝市', label: '林芝市' },
            { value: '山南市', label: '山南市' },
            { value: '那曲市', label: '那曲市' },
            { value: '阿里地区', label: '阿里地区' }
          ]
        },
        {
          value: '陕西省',
          label: '陕西',
          children: [
            { value: '西安市', label: '西安市' },
            { value: '铜川市', label: '铜川市' },
            { value: '宝鸡市', label: '宝鸡市' },
            { value: '咸阳市', label: '咸阳市' },
            { value: '渭南市', label: '渭南市' },
            { value: '延安市', label: '延安市' },
            { value: '汉中市', label: '汉中市' },
            { value: '榆林市', label: '榆林市' },
            { value: '安康市', label: '安康市' },
            { value: '商洛市', label: '商洛市' }
          ]
        },
        {
          value: '甘肃省',
          label: '甘肃',
          children: [
            { value: '兰州市', label: '兰州市' },
            { value: '嘉峪关市', label: '嘉峪关市' },
            { value: '金昌市', label: '金昌市' },
            { value: '白银市', label: '白银市' },
            { value: '天水市', label: '天水市' },
            { value: '武威市', label: '武威市' },
            { value: '张掖市', label: '张掖市' },
            { value: '平凉市', label: '平凉市' },
            { value: '酒泉市', label: '酒泉市' },
            { value: '庆阳市', label: '庆阳市' },
            { value: '定西市', label: '定西市' },
            { value: '陇南市', label: '陇南市' },
            { value: '临夏州', label: '临夏州' },
            { value: '甘南州', label: '甘南州' }
          ]
        },
        {
          value: '青海省',
          label: '青海',
          children: [
            { value: '西宁市', label: '西宁市' },
            { value: '海东市', label: '海东市' },
            { value: '海北州', label: '海北州' },
            { value: '黄南州', label: '黄南州' },
            { value: '海南州', label: '海南州' },
            { value: '果洛州', label: '果洛州' },
            { value: '玉树州', label: '玉树州' },
            { value: '海西州', label: '海西州' }
          ]
        },
        {
          value: '宁夏回族自治区',
          label: '宁夏',
          children: [
            { value: '银川市', label: '银川市' },
            { value: '石嘴山市', label: '石嘴山市' },
            { value: '吴忠市', label: '吴忠市' },
            { value: '固原市', label: '固原市' },
            { value: '中卫市', label: '中卫市' }
          ]
        },
        {
          value: '新疆维吾尔自治区',
          label: '新疆',
          children: [
            { value: '乌鲁木齐市', label: '乌鲁木齐市' },
            { value: '克拉玛依市', label: '克拉玛依市' },
            { value: '吐鲁番市', label: '吐鲁番市' },
            { value: '哈密市', label: '哈密市' },
            { value: '昌吉州', label: '昌吉州' },
            { value: '博尔塔拉州', label: '博尔塔拉州' },
            { value: '巴音郭楞州', label: '巴音郭楞州' },
            { value: '阿克苏地区', label: '阿克苏地区' },
            { value: '克孜勒苏州', label: '克孜勒苏州' },
            { value: '喀什地区', label: '喀什地区' },
            { value: '和田地区', label: '和田地区' },
            { value: '伊犁州', label: '伊犁州' },
            { value: '塔城地区', label: '塔城地区' },
            { value: '阿勒泰地区', label: '阿勒泰地区' }
          ]
        },
        {
          value: '台湾省',
          label: '台湾',
          children: [
            { value: '台北市', label: '台北市' },
            { value: '高雄市', label: '高雄市' },
            { value: '台中市', label: '台中市' },
            { value: '台南市', label: '台南市' },
            { value: '新竹市', label: '新竹市' },
            { value: '基隆市', label: '基隆市' }
          ]
        },
        {
          value: '香港特别行政区',
          label: '香港',
          children: [
            { value: '中西区', label: '中西区' },
            { value: '湾仔区', label: '湾仔区' },
            { value: '东区', label: '东区' },
            { value: '南区', label: '南区' },
            { value: '油尖旺区', label: '油尖旺区' },
            { value: '深水埗区', label: '深水埗区' },
            { value: '九龙城区', label: '九龙城区' },
            { value: '黄大仙区', label: '黄大仙区' },
            { value: '观塘区', label: '观塘区' },
            { value: '葵青区', label: '葵青区' },
            { value: '荃湾区', label: '荃湾区' },
            { value: '屯门区', label: '屯门区' },
            { value: '元朗区', label: '元朗区' },
            { value: '北区', label: '北区' },
            { value: '大埔区', label: '大埔区' },
            { value: '沙田区', label: '沙田区' },
            { value: '西贡区', label: '西贡区' },
            { value: '离岛区', label: '离岛区' }
          ]
        },
        {
          value: '澳门特别行政区',
          label: '澳门',
          children: [
            { value: '花地玛堂区', label: '花地玛堂区' },
            { value: '圣安多尼堂区', label: '圣安多尼堂区' },
            { value: '大堂区', label: '大堂区' },
            { value: '望德堂区', label: '望德堂区' },
            { value: '风顺堂区', label: '风顺堂区' },
            { value: '嘉模堂区', label: '嘉模堂区' },
            { value: '圣方济各堂区', label: '圣方济各堂区' }
          ]
        },
        {
          value: '内蒙古自治区',
          label: '内蒙古',
          children: [
            { value: '呼和浩特市', label: '呼和浩特市' },
            { value: '包头市', label: '包头市' },
            { value: '乌海市', label: '乌海市' },
            { value: '赤峰市', label: '赤峰市' },
            { value: '通辽市', label: '通辽市' },
            { value: '鄂尔多斯市', label: '鄂尔多斯市' },
            { value: '呼伦贝尔市', label: '呼伦贝尔市' },
            { value: '巴彦淖尔市', label: '巴彦淖尔市' },
            { value: '乌兰察布市', label: '乌兰察布市' },
            { value: '兴安盟', label: '兴安盟' },
            { value: '锡林郭勒盟', label: '锡林郭勒盟' },
            { value: '阿拉善盟', label: '阿拉善盟' }
          ]
        },
        {
          value: '辽宁省',
          label: '辽宁',
          children: [
            { value: '沈阳市', label: '沈阳市' },
            { value: '大连市', label: '大连市' },
            { value: '鞍山市', label: '鞍山市' },
            { value: '抚顺市', label: '抚顺市' },
            { value: '本溪市', label: '本溪市' },
            { value: '丹东市', label: '丹东市' },
            { value: '锦州市', label: '锦州市' },
            { value: '营口市', label: '营口市' },
            { value: '阜新市', label: '阜新市' },
            { value: '辽阳市', label: '辽阳市' },
            { value: '盘锦市', label: '盘锦市' },
            { value: '铁岭市', label: '铁岭市' },
            { value: '朝阳市', label: '朝阳市' },
            { value: '葫芦岛市', label: '葫芦岛市' }
          ]
        }
      ],
      activeLogTab: 'history',
      isPhoneDialogVisible: false,
      isEmailDialogVisible: false,
      phoneVerificationCode: '',
      emailVerificationCode: '',
      phoneForm: {
        newPhone: '',
        code: ''
      },
      emailForm: {
        newEmail: '',
        code: ''
      },
      phoneCountDown: 0,
      emailCountDown: 0,
      phoneRules: {
        newPhone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
        ]
      },
      emailRules: {
        newEmail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { len: 6, message: '验证码长度应为6位', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    passwordStrengthClass() {
      const password = this.securityInfo.newPassword
      if (!password) return ''
      
      // 简单的密码强度检测
      let strength = 0
      if (password.length >= 8) strength += 1
      if (/[A-Z]/.test(password)) strength += 1
      if (/[a-z]/.test(password)) strength += 1
      if (/[0-9]/.test(password)) strength += 1
      if (/[^A-Za-z0-9]/.test(password)) strength += 1
      
      if (strength <= 2) return 'weak'
      if (strength <= 4) return 'medium'
      return 'strong'
    },
    passwordStrengthText() {
      const strengthClass = this.passwordStrengthClass
      if (strengthClass === 'weak') return '弱'
      if (strengthClass === 'medium') return '中'
      return '强'
    }
  },
  mounted() {
    document.title = '京剧苑 - 个人信息'
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const token = localStorage.getItem('token')
      if (!token) {
        this.$message.error('请先登录')
        this.$router.push('/login')
        return
      }
      
      // 从localStorage加载基本信息
      this.userInfo.screenName = localStorage.getItem('screenName') || ''
      this.userInfo.avatar = localStorage.getItem('avatar') || ''
      this.userInfo.roleId = localStorage.getItem('roletype') || '0'
      
      // 从服务器获取详细信息
      service.get('/api/system/user/profile', {
        headers: {
          Authorization: `Bearer ${token}`
        }
      })
      .then(res => {
        if (res.code === 200) {
          console.log(res.data)
          const data = res.data
          this.userInfo = { ...data }
          this.userInfo.roleId = localStorage.getItem('roletype')
          this.userInfo.registerTime = this.formatDate(new Date(data.registerTime));
          // 填充基本信息表单
          this.basicInfo = {
            userId: data.userId || '',
            userName: data.userName || '',
            screenName: data.screenName || '',
            phone: data.phone || '',
            email: data.email || '',
            sex: data.sex || 'male',
            description: data.description || '',
            // 将地址字符串转换为数组
            address: data.address ? data.address.split(', ') : [], // 假设地址是以逗号分隔的字符串
            
            // phoneVerified: !!data.phoneVerified,
            // emailVerified: !!data.emailVerified
          }
        }
      })
      .catch(err => {
        console.error('获取用户信息失败', err)
        this.$message.error('获取用户信息失败，请重新登录')
      })
    },
    formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}年${month}月${day}日`;
    },
    changeAvatar() {
      const fileInput = document.createElement('input')
      fileInput.type = 'file'
      fileInput.accept = 'image/*'
      fileInput.click()
      
      fileInput.onchange = (e) => {
        const file = e.target.files[0]
        if (!file) return
        
        const formData = new FormData()
        formData.append('avatar', file)
        formData.append('token', localStorage.getItem('token'))
        
        service.put('/api/system/user/updateAvatar', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          if (res.code === 200) {
            this.userInfo.avatar = res.data
            localStorage.setItem('avatar', this.userInfo.avatar)
            this.$message.success('更换头像成功')
          }
        }).catch(err => {
          this.$message.error('更换头像失败: ' + err.message)
        })
      }
    },
    saveBasicInfo() {
      this.$refs.basicForm.validate(valid => {
        if (valid) {
          this.basicLoading = true
          
          // 将地址数组转换为字符串
          this.basicInfo.address = this.basicInfo.address.join(', ');

          service.put('/api/system/user/updateProfile', this.basicInfo)
            .then(res => {
              if (res.code === 200) {
                this.$message.success('基本信息更新成功')
                // 更新本地存储的屏幕名
                if (this.basicInfo.screenName !== localStorage.getItem('screenName')) {
                  localStorage.setItem('screenName', this.basicInfo.screenName)
                  this.userInfo.screenName = this.basicInfo.screenName
                }
                this.loadUserInfo()
              } 
            })
            .catch(err => {
              this.$message.error('更新失败: ' + err.message)
            })
            .finally(() => {
              this.basicLoading = false
            })
        }
      })
    },
    resetBasicForm() {
      this.$refs.basicForm.resetFields()
      this.loadUserInfo() // 重新加载信息
    },
    changePassword() {
      this.$refs.securityForm.validate(valid => {
        if (valid) {
          this.securityLoading = true
          
          // 加密密码
          const passwordData = {
            token: localStorage.getItem('token'),
            oldPWD: CryptoJS.MD5(this.securityInfo.currentPassword).toString(),
            newPWD: CryptoJS.MD5(this.securityInfo.newPassword).toString()
          }
          
          service.put('/api/system/user/changePassword', passwordData)
            .then(res => {
              if (res.code === 200) {
                this.$message.success('密码修改成功，请重新登录')
                // 清除登录状态，跳转到登录页
                this.logout()
              } 
            })
            .catch(err => {
              this.$message.error('密码修改失败: ' + err.message)
            })
            .finally(() => {
              this.securityLoading = false
            })
        }
      })
    },
    resetSecurityForm() {
      this.$refs.securityForm.resetFields()
    },
    logout() {
      localStorage.removeItem('token')
      localStorage.removeItem('screenName')
      localStorage.removeItem('avatar')
      localStorage.removeItem('roletype')
      localStorage.removeItem('email')
      this.$router.push('/login')
    },
    openPhoneVerificationDialog() {
      this.isPhoneDialogVisible = true;
      this.phoneForm.newPhone = '';
      this.phoneForm.code = '';
    },
    openEmailVerificationDialog() {
      this.isEmailDialogVisible = true;
      this.emailForm.newEmail = '';
      this.emailForm.code = '';
    },
    startPhoneCountDown() {
      this.phoneCountDown = 60;
      const timer = setInterval(() => {
        this.phoneCountDown--;
        if (this.phoneCountDown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    startEmailCountDown() {
      this.emailCountDown = 60;
      const timer = setInterval(() => {
        this.emailCountDown--;
        if (this.emailCountDown <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    sendPhoneVerificationCode() {
      this.$refs.phoneForm.validateField('newPhone', (valid) => {
        if (!valid) {
          service.get('/api/system/verification/send-phone-code', {
            params:{
                phone: this.phoneForm.newPhone
            }
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('验证码已发送');
              this.startPhoneCountDown();
            } else {
              this.$message.error(res.message || '发送失败');
            }
          });
        }
      });
    },
    sendEmailVerificationCode() {
      this.$refs.emailForm.validateField('newEmail', (valid) => {
        if (!valid) {
          service.get('/api/system/verification/send-email-code', {
            params:{
                email: this.emailForm.newEmail
            }
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('验证码已发送');
              this.startEmailCountDown();
            } else {
              this.$message.error(res.message || '发送失败');
            }
          });
        }
      });
    },
    verifyPhoneCode() {
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
         const dataToSend = { ...this.phoneForm, token: localStorage.getItem('token') }; 
          service.put('/api/system/user/updatePhone', dataToSend)
          .then(res => {
            if (res.code === 200) {
              this.basicInfo.phone = this.phoneForm.newPhone;
              this.isPhoneDialogVisible = false;
              this.$message.success('手机号更新成功');
            } 
          });
        }
      });
    },

    verifyEmailCode() {
    this.$refs.emailForm.validate((valid) => {
      if (valid) {
        const dataToSend = { ...this.emailForm, token: localStorage.getItem('token') }; 
        service.post('/api/system/user/updateEmail', dataToSend).then(res => {
          if (res.code === 200) {
            this.basicInfo.email = this.emailForm.newEmail;
            this.isEmailDialogVisible = false;
            this.$message.success('邮箱更新成功');
          } 
        });
      }
    });
    }
}
}

</script>

<style scoped>
.profile-container {
  min-height: 100vh;
  padding-bottom: 50px;
  background-color: #f9f5f0;
}

.banner {
  height: 500px;
  background-image: url('../assets/personbg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(139, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
}

.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
}

.banner-content h1 {
  font-size: 4rem;
  font-family: 'STXingkai', 'STZhongsong', serif;
  margin-bottom: 15px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
  color: #FFD700;
  letter-spacing: 10px;
}

.banner-content p {
  font-size: 1.4rem;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 3px;
}

.content-section {
  padding: 30px 8%;
  max-width: 1200px;
  margin: 0 auto;
}

.profile-content {
  display: flex;
  gap: 30px;
}

.profile-sidebar {
  width: 280px;
  flex-shrink: 0;
}

.avatar-section {
  background: #fff;
  border-radius: 8px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.avatar-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}

.avatar-overlay:hover {
  opacity: 1;
}

.user-name {
  margin: 0 0 10px;
  font-size: 1.4rem;
  color: #333;
}

.user-role {
  color: #8B0000;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-since {
  color: #999;
  font-size: 0.9rem;
}

.menu-section {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.menu-item {
  padding: 15px 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item i {
  margin-right: 10px;
  font-size: 1.2rem;
  color: #8B0000;
}

.menu-item:hover {
  background: #f9f9f9;
}

.menu-item.active {
  background: #8B0000;
  color: white;
}

.menu-item.active i {
  color: white;
}

.profile-main {
  flex-grow: 1;
}

.section-container {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 1.5rem;
  color: #8B0000;
  margin-top: 0;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

.profile-form {
  max-width: 600px;
}

.form-tip {
  color: #999;
  font-size: 0.8rem;
  margin-left: 5px;
}

.form-verified {
  color: #67C23A;
  margin-left: 10px;
}

.password-strength {
  margin-top: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.strength-label {
  margin-right: 10px;
  color: #666;
}

.strength-meter {
  height: 8px;
  width: 200px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  transition: width 0.3s;
}

.strength-bar.weak {
  width: 30%;
  background: #F56C6C;
}

.strength-bar.medium {
  width: 60%;
  background: #E6A23C;
}

.strength-bar.strong {
  width: 100%;
  background: #67C23A;
}

.strength-text {
  margin-left: 10px;
  font-size: 0.9rem;
}

.password-tips {
  margin-top: 15px;
  background: #f9f9f9;
  padding: 10px 15px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.password-tips p {
  margin-top: 0;
  color: #666;
}

.password-tips ul {
  padding-left: 20px;
  margin-bottom: 0;
}

.password-tips li {
  color: #999;
  margin-bottom: 5px;
}

.password-tips li.active {
  color: #67C23A;
}

@media (max-width: 992px) {
  .profile-content {
    flex-direction: column;
  }
  
  .profile-sidebar {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 30px;
  }
}

@media (max-width: 768px) {
  .banner {
    height: 240px;
  }
  
  .banner-content h1 {
    font-size: 3rem;
    letter-spacing: 5px;
  }
  
  .banner-content p {
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  
  .content-section {
    padding: 20px 3%;
  }
  
  .section-container {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .banner-content h1 {
    font-size: 2.5rem;
    letter-spacing: 3px;
  }
}
</style> 